<!-- 轨迹页面 -->
<template>
  <TitleBalance :name="`轨迹信息`">
    <template slot="right">
      <!-- <el-button>邮件发送</el-button>
      <el-button>链接分享</el-button>
      <el-button>下载</el-button> -->
    </template>
    <!-- 内容 -->
    <template slot="center">
      <!-- <el-table v-load-more.expand="{func: loadmore, target: '.el-table__body-wrapper', delay: 300}"
                height="280"
                :data="visibleData"
                style="width: 100%"
                :load-more-disabled="disabledLoad">
        <el-table-column type="index"
                         width="50">
        </el-table-column>
        <el-table-column label="定位时间"
                         prop="time"></el-table-column>
        <el-table-column label="定位类型"
                         width="260"
                         prop="type">
          <template slot-scope="scope">
            <span>{{scope.row.type === 0 ? 'GPS' : 'LBS'}}</span>
          </template>
        </el-table-column>
        <el-table-column label="温度（℃）"
                         width="260"
                         prop="temperature"
                         show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{scope.row.temperature || '--'}}</span>
          </template>
        </el-table-column>
        <el-table-column label="湿度（℃）"
                         width="260"
                         prop="humidity"
                         show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{scope.row.humidity || '--'}}</span>
          </template>
        </el-table-column>
        <el-table-column label="位置"
                         prop="address"
                         min-width="260">
        </el-table-column>
        <div v-if="visibleData.length >= 10"
             slot="append"
             class="under"
             style=" ">{{content}}</div>
      </el-table> -->
      <el-table v-loadmore="loadMore"
                height="280"
                :data="visibleData"
                style="width: 100%"
                :load-more-disabled="disabledLoad">
        <el-table-column type="index"
                         width="50">
        </el-table-column>
        <el-table-column label="定位时间"
                         prop="time"></el-table-column>
        <el-table-column label="定位类型"
                         width="260"
                         prop="type">
          <template slot-scope="scope">
            <span>{{scope.row.type === 0 ? 'GPS' : 'LBS'}}</span>
          </template>
        </el-table-column>
        <el-table-column label="温度（℃）"
                         width="260"
                         prop="temperature"
                         show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{scope.row.temperature || '--'}}</span>
          </template>
        </el-table-column>
        <el-table-column label="湿度（℃）"
                         width="260"
                         prop="humidity"
                         show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{scope.row.humidity || '--'}}</span>
          </template>
        </el-table-column>
        <el-table-column label="位置"
                         prop="address"
                         min-width="260">
        </el-table-column>
        <!-- 底部文案 -->
        <div v-if="visibleData.length >= 10"
             slot="append"
             class="under"
             style=" ">{{content}}</div>
      </el-table>
    </template>
  </TitleBalance>
</template>

<script>
// import VirtualScroll from './ElTableVirtualScroll'
import TitleBalance from './TitleBalance.vue';
import cert from '@/api/modules/cert'

export default {
  name: 'Iocus',
  components: { TitleBalance },
  directives: {
    'loadmore': {
      bind (el, binding) {
        const selectWrap = el.querySelector('.el-table__body-wrapper')
        selectWrap.addEventListener('scroll', function () {
          let sign = 0
          const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight
          if (scrollDistance <= sign) {
            binding.value()
          }
        })
      }
    }
  },
  props: {
    value: {
      type: [String, Number],
      default: null
    }
  },
  data () {
    return {
      virtualList: [],
      visibleCount: 10,
      content: '加载更多',
      pageIndex: 1,
      pageSize: 10,
      tableData: [],
    }
  },
  computed: {
    // 是否禁止无限加载
    disabledLoad () {
      return false
    },
    visibleData () {
      return this.tableData.slice(0, Math.min(this.tableData.length, this.visibleCount))
    },
    orderId () {
      return this.value
    }
  },
  created () {
    this.getCertChainEvidencePosition(this.pageIndex, this.pageSize)
  },
  methods: {
    async getCertChainEvidencePosition (pageIndex, pageSize) {
      let response = await cert.getCertPosition(this.orderId, pageIndex, pageSize)
      if (response?.data?.records) {
        // this.tableData = response?.data?.records
        response?.data?.records.forEach(item => {
          this.tableData.push(item)
        });
      }
    },
    async loadMore () {
      console.log('滚动到底部了')
      this.pageIndex++
      await this.getCertChainEvidencePosition(this.pageIndex, this.pageSize)
      this.visibleCount += 10
      if (this.visibleCount > this.tableData.length) {
        this.content = '暂无更多数据'
      }
    },
    //动态加载表数据方法
    // scrollMethod (pageIndex, pageSize) {
    // this.query.page = pageIndex
    // this.query.size = pageSize
    // let count = 1
    // console.log('应该添加新数据啦');

    // while (count < 11) {
    //   count++
    //   this.tableData.push({
    //     id: pageIndex + count,
    //     date: "2016-05-02"
    //   })
    // }
  }
}
</script>

<style scoped>
.under {
  margin-top: 10px;
  margin-bottom: 10px;
  text-align: center;
  font-size: 15px;
}
</style>
